<template>
  <div class="property-detail-container">
    <el-card>
      <!-- 返回按钮 -->
      <el-button type="text" @click="goBack" class="back-button">
        <el-icon><ArrowLeft /></el-icon> 返回列表
      </el-button>

      <!-- 房产详情内容 -->
      <div class="property-content">
        <!-- 左侧图片展示区 -->
        <div class="image-section">
          <el-carousel :interval="5000" arrow="always" height="400px">
            <el-carousel-item v-for="(img, index) in property.images" :key="index">
              <el-image
                  :src="img"
                  :preview-src-list="property.images"
                  fit="cover"
                  class="detail-image"
              />
            </el-carousel-item>
          </el-carousel>

          <div class="image-thumbnails">
            <div
                v-for="(img, index) in property.images"
                :key="'thumb-'+index"
                class="thumbnail"
                @click="activeImageIndex = index"
            >
              <el-image :src="img" fit="cover" />
            </div>
          </div>
        </div>

        <!-- 右侧信息展示区 -->
        <div class="info-section">
          <!-- 标题和评分 -->
          <div class="title-section">
            <h2>{{ property.name }}</h2>
            <div class="rating">
              <span class="score">{{ property.rating }}</span>
              <span>/10分</span>
            </div>
          </div>

          <!-- 标签区域 -->
          <div class="tags">
            <el-tag type="info" v-if="property.status === '在售'">{{ property.status }}</el-tag>
            <el-tag v-for="tag in property.tags" :key="tag" type="info">{{ tag }}</el-tag>
          </div>

          <!-- 价格信息 -->
          <div class="price-section">
            <div class="price-item">
              <span class="label">单价：</span>
              <span class="value">{{ property.pricePerSquare }}元/m²</span>
            </div>
            <div class="price-item">
              <span class="label">总价：</span>
              <span class="value">{{ property.totalPriceRange }}万元/套</span>
            </div>
            <div class="price-note">
              报价时间：{{ property.priceDate }}，价格有效期：{{ property.priceValidDays }}天<br>
              该价格为参考价格，实际价格以开发商为准
            </div>
          </div>

          <!-- 基本信息 -->
          <div class="basic-info">
            <div class="info-item">
              <span class="label">主力户型：</span>
              <span class="value">{{ property.mainLayout }}</span>
            </div>
            <div class="info-item">
              <span class="label">项目地址：</span>
              <span class="value">{{ property.address }}</span>

            </div>
            <div class="info-item">
              <span class="label">近期开盘：</span>
              <span class="value">{{ property.openDate }}</span>

            </div>
            <div class="info-item">
              <span class="label">交房时间：</span>
              <span class="value">{{ property.deliveryDate }}</span>

            </div>
            <div class="info-item">
              <span class="label">预售证：</span>
              <span class="value">{{ property.presaleLicense }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 户型展示区 -->
      <div class="layout-section">
        <h3 class="section-title">主力户型</h3>
        <div class="layout-list">
          <div v-for="layout in property.layouts" :key="layout.type" class="layout-item">
            <el-image :src="layout.image" fit="cover" class="layout-image" />
            <div class="layout-info">
              <div class="layout-type">{{ layout.type }}</div>
              <div class="layout-area">{{ layout.area }}m²</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 楼盘周边 -->
      <div class="surrounding-section">
        <h3 class="section-title">楼盘周边</h3>
        <el-tabs v-model="activeSurroundingTab">
          <el-tab-pane label="交通" name="transport">
            <div class="surrounding-content">
              <div v-for="item in property.surrounding.transport" :key="item.name" class="surrounding-item">
                <el-icon><Location /></el-icon>
                <span>{{ item.name }}</span>
                <span class="distance">{{ item.distance }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="教育" name="education">
            <div class="surrounding-content">
              <div v-for="item in property.surrounding.education" :key="item.name" class="surrounding-item">
                <el-icon><School /></el-icon>
                <span>{{ item.name }}</span>
                <span class="distance">{{ item.distance }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="医疗" name="medical">
            <div class="surrounding-content">
              <div v-for="item in property.surrounding.medical" :key="item.name" class="surrounding-item">
                <el-icon><FirstAidKit /></el-icon>
                <span>{{ item.name }}</span>
                <span class="distance">{{ item.distance }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商业" name="shopping">
            <div class="surrounding-content">
              <div v-for="item in property.surrounding.shopping" :key="item.name" class="surrounding-item">
                <el-icon><ShoppingCart /></el-icon>
                <span>{{ item.name }}</span>
                <span class="distance">{{ item.distance }}</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  ArrowLeft,
  Location,
  School,
  FirstAidKit,
  ShoppingCart
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 当前房产ID
const propertyId = ref(route.params.id)

// 模拟房产数据
const property = ref({
  id: propertyId.value,
  name: '京能·西贤府',
  alias: '西贤嘉苑',
  rating: '9.4',
  status: '在售',
  tags: ['洋房', '大平层', '四至五环', '国企开发'],
  pricePerSquare: '83000',
  totalPriceRange: '950-1415',
  priceDate: '2025年04月07日',
  priceValidDays: '14',
  mainLayout: '四居',
  address: '丰台大瓦窑地铁站A口北侧京能·西贤府',
  openDate: '2024年7月6日开盘',
  deliveryDate: '2025年12月31日',
  groupMemberCount: '3000',
  images: [
    'https://pic4.ajkimg.com/display/xinfang/6758d8722d73bb55b3b63793a590bfe2/600x450x98c.jpg',
    'https://pic4.ajkimg.com/display/xinfang/e060868817256549bd4ec1cb9c82ce33/600x450x98c.jpg',
    'https://pic4.ajkimg.com/display/xinfang/f67d61e539bd0367e51491736d730a1d/600x450x98c.jpg'
  ],
  layouts: [
    {
      type: '四居室',
      area: '120',
      image: 'https://pic4.ajkimg.com/display/xinfang/bfe8ba8c96481b22014d5f08c53cf94e/500x500.jpg'
    },
    {
      type: '四居室',
      area: '135',
      image: 'https://pic4.ajkimg.com/display/xinfang/7fa3bdc300823f3b5e0b84730aaec941/500x500.jpg'
    },
    {
      type: '五居室',
      area: '150',
      image: 'https://pic4.ajkimg.com/display/xinfang/38d9163aa97e486c3a25117d3465dc57/240x180n.jpg'
    }
  ],
  surrounding: {
    transport: [
      { name: '大瓦窑地铁站', distance: '500米' },
      { name: '公交站(大瓦窑站)', distance: '300米' }
    ],
    education: [
      { name: '成都市丰台区第一小学', distance: '1.2公里' },
      { name: '成都市丰台区实验学校', distance: '2.5公里' }
    ],
    medical: [
      { name: '丰台医院', distance: '3公里' },
      { name: '医院', distance: '5公里' }
    ],
    shopping: [
      { name: '万达广场', distance: '2公里' },
      { name: '永旺梦乐城', distance: '3.5公里' }
    ]
  }
})

// 周边设施当前标签
const activeSurroundingTab = ref('transport')

// 当前展示的图片索引
const activeImageIndex = ref(0)

// 返回列表
const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.property-detail-container {
  padding: 20px;
}

.back-button {
  margin-bottom: 20px;
  font-size: 16px;
}

.property-content {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.image-section {
  flex: 1;
}

.info-section {
  flex: 1;
}

.detail-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.image-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.thumbnail {
  width: 80px;
  height: 60px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
}

.thumbnail:hover {
  border-color: var(--el-color-primary);
}

.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title-section h2 {
  margin: 0;
  font-size: 24px;
}

.rating {
  display: flex;
  align-items: center;
}

.score {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
  margin-right: 5px;
}

.tags {
  margin-bottom: 20px;
}

.tags .el-tag {
  margin-right: 10px;
}

.price-section {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.price-item {
  margin-bottom: 10px;
}

.price-item .label {
  color: #666;
}

.price-item .value {
  font-size: 18px;
  font-weight: bold;
  color: var(--el-color-primary);
}

.price-note {
  font-size: 12px;
  color: #999;
  margin: 10px 0;
}

.price-actions {
  display: flex;
  gap: 15px;
}

.basic-info {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.info-item .label {
  color: #666;
  min-width: 80px;
}

.info-item .value {
  margin-right: 10px;
}

.contact-section {
  background-color: #f0f7ff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.contact-section .phone {
  font-size: 18px;
  font-weight: bold;
  color: var(--el-color-primary);
  margin-bottom: 5px;
}

.contact-note {
  font-size: 12px;
  color: #666;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.action-buttons .el-button {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.action-buttons .text {
  font-size: 16px;
  font-weight: bold;
}

.action-buttons .sub-text {
  font-size: 12px;
  font-weight: normal;
}

.join-group {
  background-color: #ff6b6b;
  border-color: #ff6b6b;
}

.gift-button {
  background-color: #ffb347;
  border-color: #ffb347;
}

.section-title {
  font-size: 20px;
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.layout-section {
  margin-bottom: 30px;
}

.layout-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.layout-item {
  width: 280px;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.layout-image {
  width: 100%;
  height: 200px;
}

.layout-info {
  padding: 15px;
  text-align: center;
}

.layout-type {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.layout-area {
  color: #666;
  margin-bottom: 10px;
}

.surrounding-section {
  margin-bottom: 30px;
}

.surrounding-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.surrounding-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.surrounding-item .el-icon {
  margin-right: 10px;
  color: var(--el-color-primary);
}

.surrounding-item .distance {
  margin-left: auto;
  color: #666;
}
</style>